<template>
    <div>
        <gh-upload-image
                ref="ghupimg"
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :isCameraOnly="true"
                :imageAttribute="imageAttribute"
                @success="successFun"
                @state-change="stateChange"
                class="dom-1">
            <md-button type="primary" round class="dom-1-button">微信相机</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :isCameraOnly="false"
                :imageAttribute="imageAttribute"
                @success="successFun"
                @state-change="stateChange"
                class="dom-2">
            <md-button type="primary" round class="dom-2-button">微信相册和相机</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :pmdCamera="true"
                :isCameraOnly="false"
                :imageAttribute="imageAttribute"
                :uploadOss="false"
                @success="successFun"
                @state-change="stateChange"
                class="dom-3">
            <md-button type="primary" round class="dom-3-button">原生相册和相机</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :pmdCamera="true"
                :isCameraOnly="true"
                :imageAttribute="imageAttribute"
                :uploadOss="false"
                @success="successFun"
                @state-change="stateChange"
                class="dom-4">
            <md-button type="primary" round class="dom-4-button">原生相机</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :pmdCamera="true"
                :isCameraOnly="false"
                :imageAttribute="imageAttribute"
                @success="successFun"
                @state-change="stateChange"
                class="dom-5">
            <md-button type="primary" round class="dom-5-button">原生相册和相机uploadOss</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :pmdCamera="true"
                :isCameraOnly="true"
                :imageAttribute="imageAttribute"
                @success="successFun"
                @state-change="stateChange"
                class="dom-6">
            <md-button type="primary" round class="dom-6-button">原生相机uploadOss</md-button>
        </gh-upload-image>
        <br>
        <gh-upload-image
                type="xqwx"
                system="gh"
                :businessType="businessType"
                :pmdCamera="true"
                :isCameraPre="true"
                :imageAttribute="imageAttribute"
                :uploadOss="false"
                @success="successFun"
                @state-change="stateChange"
                class="dom-4">
            <md-button type="primary" round class="dom-4-button">原生人脸相机!不生效</md-button>
        </gh-upload-image>
        <p v-if="showFileId"> {{ showFileId }} </p>
        <img v-if="showImgSrc" :src="showImgSrc" style="width: 300px;">
        <br>
        <img v-if="showFileUrl" :src="showFileUrl" style="width: 300px;">
        <div v-if="showFileUrl" class="e-text"> {{ showFileUrl }}</div>
        <div style="width:100%;height:300px;"></div>
    </div>
</template>

<script>
  import { Button } from 'mand-mobile'

  export default {
    components: {
      [ 'gh-upload-image' ]: () => import('@/components/ghUploadImage.vue'),
      [ Button.name ]: Button
    },
    data(){
      return {
        imageAttribute: {
          width: 1400,
          height: 1400,
          quality: 0.3
        },
        stype: '',
        ssystem: '',
        businessType: '',
        showFileId: '',
        showImgSrc: '',
        showFileUrl: ''
      }
    },
    mounted(){
      this.businessType = 'ORDINARY_FACE'
      this.stype = 'wx'
      this.ssystem = 'gh'
    },
    methods: {
      successFun(data){
        /*
        * fileId 文件唯一ID
        * imgSrc 图片base64
        * */
        let { fileId, imgSrc } = data
        this.showFileId = fileId
        this.showImgSrc = imgSrc
        this.$refs.ghupimg.previewFile(fileId).then(fileUrl => {
          this.showFileUrl = fileUrl
          console.log(fileUrl)
        }).catch(errorText => {
          console.log('错误返回的文字信息:' + errorText)
        })
      },
      stateChange(data){
        console.log(data)
      }
    }
  }
</script>
<style lang="less" scoped>
    .dom-1 {
        width: 100%;
        text-align: center;
        .dom-1-button {
            width: 600px;
            height: 60px;
        }
    }

    .dom-2 {
        width: 100%;
        text-align: center;
        .dom-2-button {
            width: 500px;
            height: 70px;
        }
    }

    .dom-3 {
        width: 100%;
        text-align: center;
        .dom-3-button {
            width: 400px;
            height: 80px;
            font-size: 24px;
        }
    }

    .dom-4 {
        width: 100%;
        text-align: center;
        /deep/ .gh-upload-image {
            width: 100%;
        }
        .dom-4-button {
            height: 80px;
            font-size: 42px;
            color: #B81D22;
        }
    }

    .dom-5 {
        width: 100%;
        text-align: center;
        /deep/ .gh-upload-image {
            width: 80%;
        }
        .dom-5-button {
            height: 80px;
            font-size: 42px;
            color: #B81D22;
        }
    }

    .dom-6 {
        width: 100%;
        text-align: center;
        /deep/ .gh-upload-image {
            width: 60%;
        }
        .dom-6-button {
            height: 80px;
            font-size: 42px;
            color: #B81D22;
        }
    }

    .e-text {
        padding: 20px;
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
    }

    // .box {
    //     width: 300px;
    //     height: 80px;
    //     line-height: 80px;
    //     text-align: center;
    //     font-size: 24px;
    //     background: red;
    //     color: #ffffff;
    // }
    /deep/ .md-popup-box {
        padding-top: 50px;
        border-radius: 20px 20px 0 0;
        background: #ffffff;
        .popup-header {
            position: relative;
            width: 100%;
            height: 45px;
            p {
                width: 100%;
                margin: 0;
                line-height: 45px;
                font-size: 32px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                text-align: center;
            }
        }
        .face-content {
            width: 100%;
            height: 600px;
        }
        .popup-ok-button {
            // display: block;
            width: 100%;
        }
    }
</style>

